﻿
@{
    ViewBag.Title = "Index";
    Layout = null;
}


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>大转盘抽奖</title>
    <style>
        #lottery {
            width: 570px;
            height: 510px;
            margin: 0px auto;
            border: 4px solid #ba1809;
        }

            #lottery table {
                background-color: yellow;
            }

                #lottery table td {
                    position: relative;
                    width: 190px;
                    height: 170px;
                    text-align: center;
                    color: #333;
                    font-index: -999;
                }

                    #lottery table td img {
                        display: block;
                        width: 190px;
                        height: 170px;
                    }

                    #lottery table td a {
                        width: 190px;
                        height: 170px;
                        display: block;
                        text-decoration: none;
                        background: url(../Images/lottery1.jpg) no-repeat top center;
                    }

                        #lottery table td a:hover {
                            background-image: url(../Images/lottery2.jpg);
                        }

                    #lottery table td.active .mask {
                        display: block;
                    }

        .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: url(../Images/mask.png) no-repeat;
            display: none;
        }

        .event-info{width: 1050px; height: 500px; overflow: hidden; margin: 0 auto; color: #5f3b25; line-height: 36px;}
        .panel{
		width:340px;
		padding:10px;
		text-align: center;
		background-color:#FF3C3C;
		border-radius: 0 0 8px 8px;
     }
    h2{
        color:#fff;
        margin: 5px;
    }
	.activity{
		width: 300px;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
		height: 165px;
		background-color: #fff;
        border-radius: 5px;
	}
	.activity ul{
		top: -15px;
		padding: 0;
		color: #666;
		position: relative;
	}
	.activity li{
		height: 34px;
               padding:0;
		font-size: 12px;
		line-height: 34px;
                list-style: none;
		border-bottom: 1px dotted #d2d2d2;
	}
    </style>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.query.js"></script>
    <link href="~/Scripts/theme/default/layer.css" rel="stylesheet" />
    <script src="~/Scripts/layer.js"></script>
    <script src="~/Scripts/jquery.qrcode.min.js"></script>

</head>
<body class="keBody">
    <!--效果html开始-->
    <div id="userid">欢迎来到铸造王者！</div><br/>
    <div>
        10.1国庆大放送，1.01元抽奖high翻天！<br/>
        凡在本次活动中，抽奖获得的物品均可等价交换或折现。
    </div>
    <div id='code1'></div>
    <input id="umobile" type="hidden" value="" />
    <input id="uqq" type="hidden" value="" />
    <div id="lottery">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td class="lottery-unit lottery-unit-0"><img src="~/Images/奖品1.png"><div class="mask"></div></td>
                <td class="lottery-unit lottery-unit-1"><img src="~/Images/奖品2.png"><div class="mask"></div></td>
                <td class="lottery-unit lottery-unit-2"><img src="~/Images/奖品3.png"><div class="mask"></div></td>
            </tr>
            <tr>
                <td class="lottery-unit lottery-unit-7"><img src="~/Images/奖品4.png"><div class="mask"></div></td>
                <td><a href="#"></a></td>
                <td class="lottery-unit lottery-unit-3"><img src="~/Images/奖品5.png"><div class="mask"></div></td>
            </tr>
            <tr>
                <td class="lottery-unit lottery-unit-6"><img src="~/Images/奖品6.png"><div class="mask"></div></td>
                <td class="lottery-unit lottery-unit-5"><img src="~/Images/奖品7.png"><div class="mask"></div></td>
                <td class="lottery-unit lottery-unit-4"><img src="~/Images/奖品8.png"><div class="mask"></div></td>
            </tr>
        </table>
    </div>
    <div class="panel">
        <h2>活动动态</h2>
        <div class="activity" id="J_Activity">
            <ul>
                <li>187****66 获得九大热门英雄</li>
                <li>135****12 获得服部半藏英雄+皮肤</li>
                <li>139****45 获得韩信英雄+皮肤</li>
                <li>186****90 获得马可波罗英雄+皮肤</li>
                <li>177****57 获得孙尚香英雄+皮肤</li>
                <li>139****45 获得韩信/荆轲/吕布英雄+皮肤</li>
                <li>186****90 获得诸葛/李白/狄仁杰英雄+皮肤</li>
                <li>177****57 获得随机7天皮肤</li>
            </ul>
        </div>
    </div>
    <dl class="event-info">
        <dt>活动规则：</dt>
        <dd>1. 参与活动前，请详细阅读活动规则及相关条款。凡参与本次活动，则视为同意活动规则及免责声明条款。</dd>
        <dd>2. 本次活动时间为2017年9月1日—2017年10月31日。中奖100%。付款后3天内会公布最后得主。</dd>
        <dd>3. 活动过程中，需要准确填写您的真实信息，填写信息有误，视为自动放弃获奖资格。</dd>
        <dd>4. 若涉嫌违法或侵犯第三人合法权益等不符合资质的中奖者，将取消其获奖资格。</dd>
        <dd>5. 对于任何通过不正当手段参与活动者，活动主办方有权在不事先通知的情况下取消其活动参与及获奖资格，并保留相关法律权利。</dd>
        <dd>6. 如遇不可抗力因素，本次活动因故无法进行时，活动主办方在法律允许的范围内有权决定取消、终止、修改或暂停本活动。</dd>
        <dd>7. 举办方对本次活动在法律范围内拥有最终解释权。</dd>
    </dl>
    <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
    <script src="~/signalr/hubs"></script>
    <script src="~/Scripts/signalHelp.js"></script>
    <script type="text/javascript">
        var lottery = {
            index: -1,    //当前转动到哪个位置，起点位置
            count: 0,    //总共有多少个位置
            timer: 0,    //setTimeout的ID，用clearTimeout清除
            speed: 20,    //初始转动速度
            times: 0,    //转动次数
            cycle: 50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
            prize: -1,    //中奖位置
            init: function (id) {
                if ($("#" + id).find(".lottery-unit").length > 0) {
                    $lottery = $("#" + id);
                    $units = $lottery.find(".lottery-unit");
                    this.obj = $lottery;
                    this.count = $units.length;
                    $lottery.find(".lottery-unit-" + this.index).addClass("active");
                };
            },
            roll: function () {
                var index = this.index;
                var count = this.count;
                var lottery = this.obj;
                $(lottery).find(".lottery-unit-" + index).removeClass("active");
                index += 1;
                if (index > count - 1) {
                    index = 0;
                };
                $(lottery).find(".lottery-unit-" + index).addClass("active");
                this.index = index;
                return false;
            },
            stop: function (index) {
                this.prize = index;
                return false;
            }
        };


        //
        $(function () {
            var listPanel = $('#J_Activity ul');
            var z = 0;//向上滚动top值
            function up() {//向上滚动
                listPanel.animate({//中奖结果
                    'top': (z - 35) + 'px'
                }, 1500, 'linear', function () {
                    listPanel.css({ 'top': '0px' })
                    .find("li:first").appendTo(listPanel);
                    up();
                });
            }
            up();
        });


        var content = "";

        function isMobile(val) {
            var reg = /^1[3, 4, 5, 6, 7, 8]\d{9}$/;
            return reg.test(val);
        }

        function show(id, name) {
            var m;
            var qq;
            //$("#m").val()
            //$("#qq").val()
            if ($("#umobile").val() != "") {
                m = $("#umobile").val();
                qq = $("#uqq").val();
            } else {
                if (!isMobile($("#m").val())) {
                    alert('请输入有效手机号码！')
                    return;
                } else {
                    m = $("#m").val();
                    qq = $("#qq").val();
                    $("#umobile").val(m);
                    $("#uqq").val(qq);
                }
            }

            //alert($("#m").val());
            var geturl = "/Pay/WxUnifiedOrder";
            var postdata = { productId: parseInt(id) + 1001, productName: name, phone: m, prizeQQ: qq, platform: 1 };
            //请求支付
            $.ajax({
                url: geturl,
                type: "POST",
                dataType: "json",
                data: postdata,
                async: false,
                success: function (data) {
                    var str = "已有" + Math.floor(Math.random() * 10000) + "人参与，你在等什么！<br/>"
                    if (!data.state) {
                        return;
                    }
                    //+ "已有900人参与，你在等什么！<br/>"
                    //+ "请填写真实信息后支付，否则无法获得奖品！"
                    str += "<div id='code'></div>";

                    str += "请填写真实信息后支付，否则无法获得奖品！";
                    //data.error_msg
                    $("#next").html(str);
                    $("#next").show();
                    
                    initialSignalR(data.order_no);

                    $("#code").qrcode({ width: 200, height: 200, correctLevel: 0, text: data.code_url })
                    var mycanvas1 = document.getElementsByTagName('canvas')[0];
                    //将转换后的img标签插入到html中
                    var img = convertCanvasToImage(mycanvas1);
                    $("#code").empty();
                    $('#code').append(img);//imagQrDiv表示你要插入的容器id

                }/*function结束*/
            });/*ajax结束*/
        }

        function convertCanvasToImage(canvas) {
            //新Image对象，可以理解为DOM
            var image = new Image();
            // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
            // 指定格式 PNG
            image.src = canvas.toDataURL("image/png");
            return image;
        }

        $("#lottery a").click(function () {

            if (click) {
                return false;
            } else {
                //向后端接口发请求返回中奖结果
                var geturl = "/Luck/Star";
                $.ajax({
                    url: geturl,
                    type: "POST",
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        if (data.state == 1) {
                            var prize = -1;
                            lottery.prize = data.obj;
                            prize = data.obj;
                            content = data.message;
                            lottery.speed = 100;
                            roll();
                            click = true;
                            return false;
                        } else {
                            /*错误处理*/
                            if (data.errorcode == 3) {
                                $("#novip").show();
                            } else {
                                $("#notime").show();
                            }
                        }
                    }/*function结束*/
                });/*ajax结束*/
            }/*else结束*/
        });


        function roll() {
            lottery.times += 1;
            lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
            if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
                clearTimeout(lottery.timer);
                lottery.prize = -1;
                lottery.times = 0;
                click = false;
            } else {
                if (lottery.times < lottery.cycle) {
                    lottery.speed -= 10;
                } else if (lottery.times == lottery.cycle) {
                    //var index = Math.random() * (lottery.count) | 0;
                    lottery.prize = lottery.prize;
                    var mobile = $("#umobile").val();
                    var qq = $("#uqq").val();
                    var str = "<div>"
                    + "恭喜你获得：“王者荣耀全英雄皮肤”<br/>";
                    if (mobile != "") {
                        str += "手机号:" + mobile + "<br/>";
                        str += "Q  Q号:" + qq + "<br/>";
                        str += "<input type='button' value='下一步' onclick=\"show(" + lottery.prize + ",'" + content + "')\" />";
                    } else {
                        str += "手机号:<input id='m' type='text' />*<br/>";
                        str += "Q  Q号:<input id='qq' type='text' />*<br/>";
                        str += "<input type='button' value='下一步' onclick=\"show(" + lottery.prize + ",'" + content + "')\" />";
                    }
                    str += "</div>"
                    str += "<div id='next' style='display:none;'>"
                    str += "</div>"
                    setTimeout(function () {
                        layer.open({
                            type: 1,
                            skin: 'layui-layer-rim', //加上边框
                            area: ['420px', '500px'], //宽高
                            content: str,
                            end: function () {
                                //alert("关闭");
                                stopSignalR();
                            }
                        });
                    }, 3500);

                } else {
                    if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
                        lottery.speed += 110;
                    } else {
                        lottery.speed += 20;
                    }
                }
                if (lottery.speed < 40) {
                    lottery.speed = 40;
                };
                //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
                lottery.timer = setTimeout(roll, lottery.speed);//循环调用
            }
            return false;
        }

        var click = false;

        window.onload = function () {
            lottery.init('lottery');
            $("#lottery a").click(function () {
                if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
                    return false;
                } else {
                    lottery.speed = 100;
                    roll();    //转圈过程不响应click事件，会将click置为false
                    click = true; //一次抽奖完成后，设置click为true，可继续抽奖
                    return false;
                }
            });
        };

    </script>
    <!--效果html结束-->


</body>
</html>